<template>
  <div class="download-card" @click="download" :title="fileInfo.fileName">
    <div class="file-info">
      <div class="file-name">{{fileInfo.fileName}}</div>
      <div class="file-size">{{fileInfo.size | sizeShow}}</div>
    </div>
    <div class="file-cover">
      <img :src="require('@/assets/img/fileImg.png')" alt="">
    </div>
    <!-- 进度 -->
    <div class="progress-bar" v-if="downing">
      <div class="done-part" :style="`width:${progress}%;`"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'download-card',
  props: {
    fileInfo: Object,
    file: String,
  },
  data () {
    return {
      // 下载进度
      progress: 0,
      // 是否正在下载
      downing: false,
      cancelFunc: null,
    }
  },

  methods: {
    // 点击下载的回调
    download () {
      if (this.downing && this.cancelFunc) {
        // 取消下载
        this.downing = false;
        this.$message.info('取消下载')
        this.cancelFunc('cancel download')
      } else if (!this.downing) {
        // 下载
        this.downing = true;
        this.$message.info('开始下载, 再次点击可取消下载')
        let isLocal = /^blob/.test(this.file)
        if (isLocal) {
          createTag(this.file, this)
        } else {
          let src = this.file.replace(process.env.VUE_APP_DOWNLOAD, '/download')
          axios.get(src, {
            responseType: 'blob',
            onDownloadProgress: (progressEvent) => {
              this.progress = progressEvent.loaded / progressEvent.total * 100
            },
            cancelToken: new axios.CancelToken((c) => {
              this.cancelFunc = c
            })
          }).then((res) => {
            let blob = res.data;
            let src = URL.createObjectURL(blob)
            createTag(src, this)
          }).catch((err) => {
            if (err.message == 'cancel download') return
            console.log(err);
            this.downing = false;
            this.$message.error('下载失败!')
          })
        }
      }

      // 创建a标签并下载
      function createTag (src, that) {
        let a = document.createElement('a')
        a.href = src;
        a.download = that.fileInfo.fileName

        a.click()
        that.$message.success('下载成功')
        that.downing = false;

        URL.revokeObjectURL(src)
        a = null;
      }
    },
  },

  filters: {
    sizeShow (size) {
      if (size < 1024) {
        return size + 'B'
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + 'K'
      } else {
        return (size / 1024 / 1024).toFixed(2) + 'M'
      }
    },
  },
}
</script>

<style scoped>
.download-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 75px;
  width: 230px;
  background-color: #fff;
  padding: 0px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.file-info {
  text-align: left;
}

.file-cover {
  width: 35px;
  min-width: 35px;
}

.file-cover img {
  object-fit: cover;
  width: 100%;
}

.file-name {
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}

.file-size {
  color: rgb(117, 117, 117);
  font-size: 13px;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ddd;
  height: 3px;
}

.done-part {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background-color: #98e165;
  transition: 0.1s width ease;
}
</style>